// import 'package:auto_size_text/auto_size_text.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_syt/api/api.dart';
import 'package:flutter_syt/datas/game_item.dart';
import 'package:flutter_syt/domain/games/game_utils/game_utils_controller.dart';
import 'package:flutter_syt/domain/widgets/network_load_image.dart';
import 'package:flutter_syt/generated/l10n.dart';
import 'package:flutter_syt/utils/click_utils.dart';
import 'package:flutter_syt/widgets/normal_grid.dart';
import 'package:yyy_route_annotation/yyy_route_annotation.dart';

class SportsBasePage extends StatefulWidget {
  final bool _needAppBar = true;
  @override
  State<StatefulWidget> createState() {
    return _SportsListState(_needAppBar);
  }
}

@RoutePage(name: "sportsList")
class SportsListPage extends SportsBasePage {
  @override
  bool get _needAppBar => true;
}

class SportsListContent extends SportsBasePage {
  @override
  bool get _needAppBar => false;
}

class _SportsListState extends State<SportsBasePage> {
  bool needBar;
  _SportsListState(this.needBar);
  NormalGridController _controller = NormalGridController();
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    GameUtilsController.managerCont['4'] = _controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: needBar
          ? AppBar(
              title: Text(S.of(context).prd_introduce),
            )
          : null,
      body: NormalGridView<GameDetail>(
        pageSize: (page) => 100,
        crossAxisCount: 3,
        mainAxisSpacing: 0,
        controller: _controller,
        padding: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
        // crossAxisSpacing: 10,
        enableLoadMore: false,
        itemBuilder: (ctx, item, index) {
          return Container(
            height: 120,
            // color: Colors.red,
            padding: EdgeInsets.only(bottom: 10.w),
            child: GestureDetector(
              child: Column(
                // mainAxisAlignment: MainAxisAlignment.center,
                // crossAxisAlignment: CrossAxisAlignment.center,
                // padding: EdgeInsets.symmetric(horizontal: 10),
                children: [
                  Container(
                    width: 72,
                    height: 72,
                    decoration: BoxDecoration(
                      // image: NetworkLoadImage.loadNetworkProviderImage(
                      //   item.background,
                      // ),
                      image: DecorationImage(
                          image: CachedNetworkImageProvider(item.background),
                          fit: BoxFit.cover),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    alignment: Alignment.center,
                    // child: ExtendedImage.network(
                    //   item.cover,
                    //   width: 52,
                    //   height: 52,
                    //   fit: BoxFit.cover,
                    //   compressionRatio: 0.01,
                    // )
                    child:
                        // Image.network(src)

                        NetworkLoadImage.loadNetworkImage(item.cover,
                            width: 52,
                            height: 52,
                            fit: BoxFit.cover,
                            settingMax: true),

                    // NetworkLoadImage.loadNetworkImage(
                    //     // imageUrl:
                    //     item.cover,
                    //     width: 52,
                    //     height: 52,
                    //     fit: BoxFit.cover,
                    //     settingMax: true),
                  ),
                  // ClipRRect(
                  //   borderRadius: BorderRadius.circular(30.w),
                  //   child: Stack(
                  //     children: [
                  //       // Image.network(
                  //       //   item.background,
                  //       //   width: 72,
                  //       //   height: 72,
                  //       //   fit: BoxFit.cover,
                  //       // ),
                  //       NetworkLoadImage.loadNetworkImage(
                  //         // CachedNetworkImage(
                  //         // imageUrl:
                  //         item.background,
                  //         width: 72,
                  //         height: 72,
                  //         fit: BoxFit.cover,
                  //       ),
                  //       Positioned.fill(
                  //         child: Center(
                  //           child: NetworkLoadImage.loadNetworkImage(
                  //             // imageUrl:
                  //             item.cover,
                  //             width: 52,
                  //             height: 52,
                  //             fit: BoxFit.cover,
                  //           ),
                  //         ),
                  //       )
                  //     ],
                  //   ),
                  // ),
                  // Padding(padding: EdgeInsets.only(top: 5.w)),
                  Expanded(
                    child: Container(
                      alignment: Alignment.center,
                      // height: 28,
                      // margin: EdgeInsets.only(bottom: 10.w),
                      child: Text(
                        item.discipline_name,
                        maxLines: 2,
                        textAlign: TextAlign.center,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(color: Colors.black, fontSize: 14),
                      ),
                    ),
                  )
                ],
              ),
              onTap: ClickUtils.debounce(() {
                RouteManager.push(context, item.path);
                // RouteManager.push(context,
                //     RoutMapping.sportsDetail(item.id, item.discipline_name));
              }),
            ),
          );
        },
        getData: (page) async {
          return await API.shared.game.items();
        },
      ),
    );
  }
}
